<template>
  <div
    class="w-full h-10 text-lg m-1 border-l-4 border-l-yellow-400 flex justify-around items-center text-white"
  >
    <div
      @click="active = 'index'"
      :class="active === 'index' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      下级团队
    </div>
    <div
      @click="active = 'order'"
      :class="active === 'order' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      团队业绩
    </div>
  </div>
  <div v-if="active === 'index'">
    <div class="p-2">
      <button
        @click="show = true"
        class="block w-full h-10 bg-yellow-300 text-red-500 text-lg font-bold rounded"
      >
        添加下级账号
      </button>
    </div>

    <div>
      <Item v-for="item in data" :key="item.id" :item="{ ...item }" :copyInfo="copyInfo" />
    </div>
  </div>

  <div v-if="active === 'order'" class="p-1">
    <Order />
  </div>

  <AddModal v-model:show-modal="show" @ok="loadData" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Item from './components/Item.vue'
import Order from './components/order.vue'
import AddModal from './modal/addModal.vue'
import { GroupListApi } from '@/apis/group'

const data = ref([])
const show = ref(false)
const active = ref('index')
const copyInfo = ref({
  h5: '',
  pc: '',
  app_down: ''
})

async function loadData() {
  const res: any = await GroupListApi()
  data.value = res.list
}

onMounted(async () => {
  loadData()

  const res: any = await GroupListApi()

  copyInfo.value = {
    h5: res.H5,
    pc: res.pcDown,
    app_down: res.appDown
  }
})
</script>
